<!--
    Powered By nodeppt - This is probably the best web presentation tool so far!
    version: 1.4.4
    site: https://github.com/ksky521/nodeppt
    date: 
-->
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浅谈WebRTC - By 小牛仔</title>
    <link rel="stylesheet" media="all" href="./css/nodeppt.css">
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="./css/phone.css">
    
    <link rel="stylesheet" href="./js/highlight/styles/monokai_sublime.css">
    <link rel="stylesheet" href="./css/font-awesome.css">
    
<link rel="stylesheet" href="./css/theme.moon.css">
</head>
<body>
<div class="slides">
    <slides id="container">
        <slide class="slide"><section class="slide-wrapper"><article class="flexbox vcenter">
<h1>浅谈WebRTC</h1>
<h2>Web Real-Time Communication</h2>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article class="flexbox vcenter">
<h1>什么是WebRTC</h1>
<p>Web Real-Time Communication(Web 实时通信，WebRTC)由一组标准、协议和 JavaScript API 组成，用于实现浏览器之间(端到端)的音频、视频及数据共享</p>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article class="flexbox vcenter">
<h1>标准的制定</h1>
<ul>
<li>W3C 的 Web Real-Time Communications(WEBRTC)Working Group 负责制定浏 览器 API;</li>
<li>IETF 的 Real-Time Communication in Web-browsers(RTCWEB)工作组负责定 义协议、数据格式、安全及其他在浏览器中实现端到端通信必需的内容</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article>
<ul>
<li>getUserMedia</li>
<li>PeerConnection</li>
<li>DataChannels</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article class="flexbox vcenter">
<h1>getUserMedia</h1>
<h2>移步之前的<a href="https://young-cowboy.github.io/ppt/MediaDevices.html" target="_blank">PPT</a></h2>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article class="flexbox vcenter">
<h1>ICE 穿越</h1>
<p>要想成功地建立端到端的连接，必须首先解决另外几个问题: </p>
<ul>
<li>必须通知另一端我们想打开一个端到端的连接，以便它知道开始监听到来的分组;</li>
<li>必须找出两端之间建立连接所需的路由线路，并在两端传播这个信息;</li>
<li>必须交换有关媒介和数据流的必要信息，比如协议、编码，等等。</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article class="flexbox vcenter">
<h1>RTCPeerConnection</h1>
<ul>
<li>RTCPeerConnection 管理穿越 NA T 的完整 ICE 工作流;</li>
<li>RTCPeerConnection 发送自动(STUN)持久化信号;</li>
<li>RTCPeerConnection 跟踪本地流;</li>
<li>RTCPeerConnection 跟踪远程流;</li>
<li>RTCPeerConnection 按需触发自动流协商;</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article class="flexbox vcenter">
<h1>信令的3种类型信息</h1>
<ul>
<li>Session control messages: 初始化和关闭通信，及报告错误；</li>
<li>Network configuration: 双方的IP地址和端口号（局域网内部IP地址需转换为外部的IP地址）；</li>
<li>Media capabilities: 双方的浏览器支持使用何种codecs以及多高的视频分辨率。</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article class="flexbox vcenter">
<h1>一个小结</h1>
<ul>
<li>Peer: 通过 WebRTC 进行数据交互的节点或用户或终端，它通常是一个 Web App，它们之间的发现，连接的建立和断开通过 signalling（信令）控制。</li>
<li>PeerConnection: 表示一个 WebRTC 通讯连接对象，它维护与这个通讯连接相关的 MediaStream，处理通讯双方信令事件，完成通讯数据的传输。</li>
<li>Signalling: 信令，WebRTC 网络通过 Signalling 来发现各个 Peer，通过 Signalling 来控制各个 Peer 之间连接的建立和断开。</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article class="flexbox vcenter">
<h1>一个小结</h1>
<ul>
<li>STUN: STUN（Session Traversal Utilities for NAT，NAT会话传输应用程序）是一种网络协议，它允许位于NAT（或多重NAT）后的客户端找出自己的公网地址，查出自己位于哪种类型的NAT之后以及NAT为某一个本地端口所绑定的Internet端端口。这些信息被用来在两个同时处于NAT 路由器之后的主机之间建立UDP通信。该协议由RFC 5389定义。</li>
<li>TURN: TURN（Traversal Using Relay NAT），是一种资料传输协议（data-transfer protocol）。通过中继服务器，穿透 NAT 或防火墙使两个 TCP 或 UPD 客户端建立连接。</li>
<li>ICE: <ul>
<li>交互式连接建立（Interactive Connectivity Establishment），一种综合性的NAT穿越的技术。</li>
<li>ICE 是由IETF的MMUSIC工作组开发出来的一种framework，可整合各种NAT穿透技术，如STUN、TURN、RSIP（Realm Specific IP，特定域IP）等。该framework可以让SIP的客户端利用各种NAT穿透方式打穿远程的防火墙。</li>
</ul>
</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article class="flexbox vcenter">
<h1>计算机网络</h1>
<img src="https://gw.alicdn.com/tfs/TB18VzucOqAXuNjy1XdXXaYcVXa-1180-570.png" alt="">

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article class="flexbox vcenter">
<h1>流程</h1>
<ul>
<li>呼叫方发送 offer</li>
<li>被呼叫方接受这个 offer</li>
<li>被呼叫方发送 answer</li>
<li>呼叫方接受 answer</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article class="flexbox vcenter">
<h1>创建信令</h1>
<pre><code class="javscript">var pc = new PeerConnection();

pc.addStream(video);
pc.createOffer(function(desc){
  pc.setLocalDescription(desc, function() {
    // send the offer to a server that can negotiate with a remote client
  });
};
</code></pre>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article class="flexbox vcenter">
<h1>创建回复</h1>
<pre><code class="javscript">var pc = new PeerConnection();

pc.setRemoteDescription(new RTCSessionDescription(offer), function() {
  pc.createAnswer(function(answer) {
    pc.setLocalDescription(answer, function() {
      // send the answer to the remote connection
  })
});
</code></pre>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article class="flexbox vcenter">
<h1>let&#39;s rock!</h1>

</article></section></slide>
        

        <!-- <slide class="slide logoslide dark nobackground">
            <article class="flexbox vcenter">
                <h2 style="color: white;">Powered By nodeppt v1.4.4</h2>
            </article>
        </slide> -->
        <div class="slideTip" id="tip"></div>
    </slides>
</div>
<canvas id="drawBoard" class="draw-board" width="900" height="700"></canvas>
<div class="progress"><span id="progress"></span></div>
<div id="_buttons">
    <div class="_btn-box" id="_btn-box" style="display:none;">
        <button class="fa fa-arrow-circle-left" id="_btn-prev"></button>
        <button class="fa fa-arrow-circle-right" id="_btn-next"></button>
        <button class="fa fa-paint-brush" id="_btn-brush"></button>
        <button class="fa fa-compress" id="_btn-overview" data-toggle="fa fa-expand"></button>
    </div>
    <button class="fa fa-bars" id="_btn-bar"  data-toggle="fa fa-close"></button>
</div>
<script src="./js/mixjs/lib/mix.0.3.0.min.js"></script>
<script>
    var ASSET_RELATIVE_DIR = ".";
</script>
<script>
var base = location.protocol + '//' + location.host;

var path = (location.pathname + '#').split('/').filter(function(v){
    return !!v;
});
path.pop();
path = path.join('/');
if (typeof ASSET_RELATIVE_DIR === 'string') {
    path = path + '/' + ASSET_RELATIVE_DIR;
}
MixJS.config({
    baseURL: [ base, path, 'js'].join('/')+'/'
});

</script>
<script src="./js/mixjs/lib/event/broadcast.js"></script>
<script src="./js/nodeppt.js"></script>
<script>
Slide.init({
    containerID: 'container',
    drawBoardID: 'drawBoard',
    slideClass: '.slide',
    buildClass: '.build',
    progressID: 'progress',
    transition: 'move',
    width: 1100,
    dir: './',
    
    //打开下面的注释就开启postMessage方式
    //访问网址127.0.0.1:8080/ppt/demo#client
    control:{
        type: 'postMessage',
        args:{
            isControl:  false
        }
    },
    
    tipID: 'tip'
});
MixJS.loadJS('highlight/highlight.pack.js',function(){
    hljs.tabReplace = '  ';
    hljs.initHighlightingOnLoad();
});
</script>


<!--placeholder-->
</body>
</html>
